<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>富文本编辑框示例</title>
</head>
<body>
    
    <h1>富文本编辑框示例</h1>
    <textarea id="editor" rows="10" cols="50"></textarea>
    <button onclick="submitContent()">提交</button>
    <div id="contentDisplay"></div>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        const socket = io();

        // 添加连接错误处理
        socket.on('connect_error', (error) => {
            console.error('连接错误:', error);
            alert('无法连接到服务器，请检查服务器是否正常运行');
        });

        // 添加连接成功处理
        socket.on('connect', () => {
            console.log('成功连接到服务器');
        });

        // 用于记录序号
        let entryNumber = 1;

        socket.on('initialMessages', (messages) => {
            messages.forEach((message) => {
                displayMessage(message);
            });
        });

        socket.on('newMessage', (message) => {
            displayMessage(message);
        });

        function submitContent() {
            // 获取富文本编辑框中的内容
            const content = document.getElementById('editor').value;
            // 获取当前时间
            const currentTime = new Date().toLocaleString();
            // 构建新的内容，包括序号、录入时间和编辑框中的内容
            const newMessage = {
                number: entryNumber,
                time: currentTime,
                content: content
            };
            // 发送新消息到服务器
            socket.emit('newMessage', newMessage);
            // 清空编辑框
            document.getElementById('editor').value = '';
            // 增加序号
            entryNumber++;
        }

        function displayMessage(message) {
            const contentDisplay = document.getElementById('contentDisplay');
            const newContent = `<p>序号: ${message.number}, 录入时间: ${message.time}<br>${message.content}</p>`;
            contentDisplay.innerHTML += newContent;
        }
    </script>
</body>
</html>
